<template>
	<view>
		<view style="height: 160rpx;box-sizing:border-box; padding-top: 81rpx;border-bottom: 2rpx solid #F7F7F7;display: flex;">
			<image @click="backTo()" src="/static/shequ/fh.png" style="margin: 0 259rpx 0 30rpx; width: 18rpx;height: 32rpx;" mode="aspectFit"></image>
			<text style="font-size: 32rpx;">店铺评价</text>
		</view>
		<view style="display: flex;flex-direction: column;justify-content: center;align-items: center; margin-top: 10rpx; flex-wrap: nowrap;font-size: 44rpx;color: #FF6F00;margin-bottom: 30rpx;">
			<text style="margin: 29rpx 0;">{{ value }}分</text>
			<uni-rate v-model="value" :margin="3" :value="5" :size="18" :max="5" allowHalf="true" color="#ADC3D0" activeColor="#FF6F00"></uni-rate>
		</view>
		<!-- 头部选项卡 -->
		<view >
			<view class="pj">
				<view class="evaluation" v-for="(item, index) in pjList" :class="{ selected: spIndex === index }" @click="pjIndex(index)">
					{{ item }}
				</view>
			</view>
			<!-- 内容切换 -->
			<scroll-view scroll-y="true" >
				<view style="margin: 0 30rpx;border-bottom: 2rpx solid #F8F8F8;padding-bottom: 30rpx;padding-top: 30rpx;" v-if="spIndex===0">
					<view style="display: flex;align-items: center; justify-content: space-between;">
						<view style="display: flex;align-items: center;">
							<image src="/static/index/3.png" style="width: 58rpx;height: 58rpx;border-radius: 50%;" mode="aspectFit"></image>
							<view style="margin-left: 15rpx;">
								<text>zhahdjd</text>
								<uni-rate v-model="value" :max="5" :readonly="true" :value="5" :size="12" color="#ADC3D0" activeColor="#FF6F00"></uni-rate>
							</view>
						</view>
						<text>2019.10.10</text>
					</view>
					<text
						style="line-height: 40rpx; font-size: 22rpx;color: #666666;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;margin-top: 30rpx;"
					>
						第二次购买了，爽滑不腻，而且还律新鲜，我家小宝贝也喜欢吃，不拦着一次可以吃一大盘。快递也很给力，可能知道我馋这个已经很
					</text>
					<view style="margin: 20rpx 0;">
						<image src="/static/index/2.png" style="width: 167rpx;height: 166rpx;border-radius: 10rpx;margin-right: 8rpx;" mode="aspectFill"></image>
						<image src="/static/index/2.png" style="width: 167rpx;height: 166rpx;border-radius: 10rpx;" mode="aspectFill"></image>
						
					</view>
					<view style="width: 690rpx;margin: 20rpx 0rpx 4rpx; height: 59rpx;background-color: #F7F7F7;font-size: 22rpx;display: flex;align-items: center;">
						<text style="padding-left: 20rpx;">商家回复：</text>
						<text style="color: #666666;margin-right: 210rpx;">很感谢很感谢很感谢很感谢</text>
						<image src="/static/waimai/消息@2x.png" style="width: 32rpx;height: 32rpx;" mode="aspectFit"></image>
					</view>
				</view>
			</scroll-view>
		
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			value: 4.6,
			pjList: ['全部(634)', '晒图(634)', '好评(634)', '差评(322)'],
			spIndex: 0
		};
	},
	methods: {
		pjIndex(index) {
			this.spIndex = index;
		}
	}
};
</script>

<style lang="scss">
.evaluation{
	width: 160rpx;
	height: 50rpx;
	background-color: #FFF9E2;
	border-radius: 25rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pj{
	display: flex;
	font-size: 24rpx;
	justify-content: space-around;
	color: #999999;
	border-bottom: 2rpx solid #F8F8F8;
	padding-bottom: 30rpx;
}
.selected{
	background-color: #FFD333;
	color: #1B1B1B;
}
</style>
